<template>
	<view class='kind'>
		<view class="search dFlex jStart_aCenter" :style="{
			'padding-top':headerTop+'px'
		}"> 
			<u-search placeholder="请输入您要搜索的内容" clearabled :showAction='false'></u-search>
		</view>
		<view class="container dFlex jBetween_aStart" :style="{
			'height':contentHeight+'px'
		}">
			<view class='kindList'>
				<view :class='["kindOne","active"]' v-for="(item,index) in 5" :key='index'> 手机 </view>
			</view>
			<view class="kindShop">
				<view class='advImg imgPublic'>
					<image src="../static/images/kindAdv.jpg" mode="widthFix"></image>
				</view>
				<view class="shopContainer" :style='{height:shopHeight+"px"}'>
					<view class="shopPart" v-for="(item,index) in 5" :key='index'>
						<view class="partTit">二级分类</view>
						<view class="partList">
							<view class='partOne' v-for="(item2,index2) in 7" :key='index2'>
								<view class="kindImg imgPublic">
									<image src="../static/logo.png" mode="widthFix"></image>
								</view>
								<text>手机</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				headerTop:getApp().globalData.headerTop,
				contentHeight:'',
				shopHeight:'',
			};
		},
		onShow(){
			this.$nextTick(()=>{
				uni.createSelectorQuery().select('.search').boundingClientRect(data => {
					this.contentHeight = uni.getSystemInfoSync().windowHeight - data.height;
					uni.createSelectorQuery().select('.advImg').boundingClientRect(data2 => {
						this.shopHeight = uni.getSystemInfoSync().windowHeight - data2.height - 20 - data.height;
					}).exec()
				}).exec()
				
			})
		},
		methods:{
			
		}
	}
</script>

<style lang="scss">
	.container{
		.kindShop{
			.shopContainer{
				.shopPart{
					.partList{
						.partOne{
							display: inline-block;
							width:calc((100% - 24px) / 3);
							margin-bottom: 12px;
							margin-right: 12px;
							text-align: center;
							font-size: 12px;
							.kindImg{
								margin-bottom: 5px;
							}
						}
						.partOne:nth-child(3n + 3){
							margin-right: 0;
						}
						width:100%;
						padding: 12px 12px 0;
						box-sizing: border-box;
						background: white;
						border-radius: 4px;
					}
					.partTit{
						width:100%;
						font-size: 13px;
						font-weight: bold;
						margin-bottom: 10px;
					}
					width: 100%;
					margin-bottom:10px;
				}
				width: 100%;
				overflow: auto;
				margin-top: 10px;
			}
			.shopContainer::-webkit-scrollbar{
				width:0;
			}
			width:calc(100% - 90px);
			height:100%;
			padding: 10px 12px 0;
			box-sizing: border-box;
			overflow: hidden;
		}
		.kindList{
			width:90px;
			height:100%;
			overflow: auto;
			background: white;
			.kindOne{
				width:100%;
				padding: 15px 0;
				font-size:13px;
				text-align: center;
				box-sizing: border-box;
				border-left: 2px solid white;
			}
			.active{
				border-left-color: red;
			}
		}
		.kindList::-webkit-scrollbar{
			width:0;
		}
		width:100%;
	}
	.search{
		width:100%;
		padding: 0 12px 10px;
		box-sizing: border-box;
		background: white;
		.zhanwei{
			width:12px;
		}
	}
</style>
